<template>
	<view>
		<l-signature v-bind="$attrs" ref="signatureRef" backgroundColor="#c8c9cc" :style="`height:${height}`" />
		<view class="flex s-center m-around bg-color" style="height: 80rpx;">
			<up-icon size="32" color="#3F7EFC" bold name="arrow-leftward" @click="revoke('undo')"></up-icon>
			<up-icon size="32" color="#3F7EFC" bold name="arrow-rightward" @click="revoke('redo')"></up-icon>
			<up-icon size="32" color="#3F7EFC" bold name="trash-fill" @click="revoke('clear')"></up-icon>
		</view>
	</view>
</template>

<script setup>
	import {
		getAuthorization,
		getUserId
	} from '@/router/auth.js';

	const props = defineProps({
			height: {
				type: String,
				default: '300rpx'
			}
		}),
		signatureRef = ref(null)

	function getDataUrl(callback) {
		signatureRef.value.canvasToTempFilePath({
			success: (res) => {
				if (res.isEmpty) {
					uni.showToast({
						title: '签名不能为空',
						icon: 'none'
					})
					return
				} else {
					const header = {}
					const Authorization = getAuthorization()
					const UserId = getUserId()

					if (Authorization) header['Authorization'] = 'Bearer ' + Authorization;
					if (UserId) header['Gneecuserid'] = UserId;

					// #ifdef APP-PLUS
					const apiBaseURL = uni.getStorageSync('BaseUrl')
					// #endif

					// #ifdef WEB
					const apiBaseURL = '/prod-api'
					// #endif

					uni.uploadFile({
						url: apiBaseURL + "/rdfile/data/upload",
						filePath: res.tempFilePath,
						name: "file",
						header,
						success: res => {
							callback(JSON.parse(res.data))
						},
						fail: err => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						}
					});
				}
			}
		})
	}
	//画板操作
	function revoke(type) {
		if (type == 'undo') {
			signatureRef.value.undo()
		}
		if (type == 'clear') {
			signatureRef.value.clear()
		}
		if (type == 'redo') {
			signatureRef.value.redo()
		}
	}

	defineExpose({
		getDataUrl
	})
</script>